<template>
	<!-- 订单管理 -->
	<view class="page themeBga">
		<uv-tabs :list="listTabs" lineColor="#75301e" lineWidth="50"></uv-tabs>
		<scroll-view class="scrollView pd20" scroll-y @scrolltolower="onScrolltolower">
			<!-- 预约订单 -->
			<view>
				<view class="everyBox themeMask pd20 mb20 border12" v-for="(item,index) in 10" :key="index">
					<view class="merchant flex justifyBetween alignCenter borderBtm">
						<view class="flexColumn">
							<text class="mb10">商家名称</text>
							<text class="fz20 gray">下单时间：2024-05-20 13：14</text>
						</view>
						<view class="detailsBtn btnSolid border12 pd1020">查看详情</view>
					</view>
					<view class="dishes flex mt16">
						<view style="width: 76%;">
							<uv-scroll-list :indicator="false">
								<view v-for="(item, index) in listScoll" :key="index" style="text-align: center;margin-right: 34rpx;">
									<image :src="item.image" mode="heightFix" style="height: 120rpx;"></image>
									<text class="fz24">{{item.name}}</text>
								</view>
							</uv-scroll-list>
						</view>
						<view class="themeMask flexColumn alignEnd ml40">
							<view class="bold fz32 mb30 mt16">￥198.00</view>
							<view class="fz20 gray">共18件</view>
						</view>
					</view>
				</view>
				<view class="everyBox themeMask pd20 border12">
					<view class="merchant flex justifyBetween alignCenter borderBtm">
						<view class="flexColumn">
							<text class="mb10">商家名称</text>
							<text class="fz20 gray">下单时间：2024-05-20 13：14</text>
						</view>
						<view class="detailsBtn btnSolid border12">查看详情</view>
					</view>
					<view class="flex fz24 mt16">
						<view class="flexColumn mr50">
							<view class="mb10">就餐人数：4人</view>
							<view>商家是否确认：是</view>
						</view>
						<view class="flexColumn">
							<view class="mb10">预计到店时间：2024-05-20 13：14</view>
							<view>是否到店：是</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	// tabs切换
	const listTabs = [{
			id: 1,
			name: '点餐订单'
		},
		{
			id: 2,
			name: '预约订单'
		}
	]
	// 滚动触底
	const onScrolltolower = () => {
		console.log('触底');
	}
	const listScoll = [{
		image: "https://via.placeholder.com/60x60.png/3c9cff/fff",
		name:'菜品名称'
	}, {
		image: "https://via.placeholder.com/60x60.png/f9ae3d/fff",
		name:'菜品名称'
	}, {
		image: "https://via.placeholder.com/60x60.png/5ac725/fff",
		name:'菜品名称'
	}, {
		image: "https://via.placeholder.com/60x60.png/f56c6c/fff",
		name:'菜品名称'
	}, {
		image: "https://via.placeholder.com/60x60.png/909399/fff",
		name:'菜品名称'
	}]
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
		.scrollView{
			height: 100%;
			overflow: hidden;
			flex: 1;
		}
	}
</style>